<template>
  <div class="info-view-edit">
    <el-dialog
      title="布局编辑"
      fullscreen
      :close-on-click-modal="false"
      :before-close="closeDialog"
      :visible.sync="visible">

      <el-form id="app1" ref="inputForm" v-loading="loading" >
        <div class="contentmenu" v-show="contentMenu" :style="styleContentmenu" @click="contentMenu=false">
          <div class="contentmenu__item" @click="handleScreen(active,zIndex)"> <i class="iconfont icon-full-screen"></i>全屏
          </div>
          <div class="contentmenu__item" @click="handleDel(active,zIndex)"> <i class="iconfont icon-delete"></i>删除图层
          </div>
          <div class="contentmenu__item" @click="handleCopy(active,zIndex)"><i class="iconfont icon-copy"></i>复制图层
          </div>
          <div class="contentmenu__item" @click="handleTop(active,zIndex)"><i class="iconfont icon-up-stop"></i>置顶图层
          </div>
          <div class="contentmenu__item" @click="handleBottom(active,zIndex)"><i class="iconfont icon-down-stop"></i>置底图层
          </div>
          <div class="contentmenu__item" @click="handleStepTop(active,zIndex)"><i class="iconfont icon-up"></i>上移一层
          </div>
          <div class="contentmenu__item" @click="handleStepBottom(active,zIndex)"><i class="iconfont icon-down"></i>下移一层
          </div>
        </div>
        <el-menu  class="nav" background-color="#ffffff" text-color="#666666" active-text-color="#409EFF" mode="horizontal" @mousedown="handleMouseDown">
          <el-submenu :index="index+''" v-for="(item,index) in baseList" :key="index">
            <template slot="title">
              <el-tooltip effect="dark" :content="item.label" placement="top">
                <i :class="'nav__icon iconfont '+item.icon"></i>
              </el-tooltip>
            </template>
            <el-menu-item @click="addCompoment(citem.option)" :key="cindex" :index="`${index}-${cindex}`"
              v-for="(citem,cindex) in item.children">
              <i :class="'nav__icon iconfont '+citem.option.icon"></i>
              <span>{{citem.label}}</span>
            </el-menu-item>
          </el-submenu>
          <el-menu-item index="6" @click="handleReset" v-show="!menuFlag">
            <el-tooltip effect="dark" content="还原" placement="top">
              <i class="nav__icon iconfont icon-reset"></i>
            </el-tooltip>
          </el-menu-item>
          <el-menu-item index="7" @click="handleView" v-show="menuFlag">
            <el-tooltip effect="dark" content="预览" placement="top">
              <i class="nav__icon iconfont icon-view"></i>
            </el-tooltip>
          </el-menu-item>
          <!-- <el-menu-item index="8" @click="handleBuild">
            <el-tooltip effect="dark" content="保存" placement="top">
              <i class="nav__icon iconfont icon-build"></i>
            </el-tooltip>
          </el-menu-item> -->
        </el-menu>
        <div class="app" :class="{'app--none':!menuFlag}">
          <div class="menu" v-show="menuFlag" @mousedown="handleMouseDown">
            <p class="title">图层</p>
            <draggable v-model="zIndexList">
              <div class="menu__item" v-show="!item.destruction" @contextmenu.prevent="handleContextMenu"
                :class="{'menu__item--active':item.index===active}" v-for="(item,index) in zIndexList" :key="index"
                @click="active=item.index" @mouseover="handleMouseOver(item.index)">
                <span class=" menu__icon">
                  <i :class="'iconfont '+item.icon"></i>
                </span>
                <span>{{item.title}}</span>
              </div>
            </draggable>
          </div>
          <div class="middle">
            <div class="wrapper__grade" @mousedown="handleMouseDown"></div>
            <div class="wrapper" ref="wrapper" @mousedown="handleMouseDown">
              <div class="content" ref="content" @mousedown.self="handleSelectMouseDown" @mousemove.self="handleSelectMouseMove"
                @mouseup.self="handleSelectMouseUp">
                <div class="selectall" :style="selectStyle" v-show="selectObj.show" ref="selectall"></div>
                <div class="selectbg" v-show="selectObj.show"></div>
                <div class="selectflag" ref="selectflag" v-show="selectObj.flag" @mousedown.stop="handleMoveMouseDown"
                  @mousemove="handleMoveMouseMove" @mouseup.stop="handleMoveMouseUp">
                </div>
                <div class="container" :style="styleName" ref="container" @contextmenu.prevent="handleContextMenu"
                  @mousedown="handleMouseDown">
                  <div class="grade" v-if="gradeFlag || config.gradeShow" :style="gradeLenStyle"></div>
                  <avue-draggable v-for="(item,index) in list" :scale="stepScale" :disabled="!menuFlag" :ref="'item_'+index"
                    :id="'item_'+index" :step="stepScale" @focus="handleFocus" @postion="handlePostion"
                    :resize="item.resize" @resize="handleResize" v-show="!item.destruction && !item.display"
                    @blur="handleBlur" @change="handleChange" :index="index" :z-index="item.zIndex"
                    :width="item.component.width" :height="item.component.height" :key="index" :top="item.top"
                    :left="item.left">
                    <component style="overflow: hidden;" :ref="'list_'+index" :disabled="!menuFlag" :id="'component_'+index" :scale="stepScale"
                      :width="item.component.width" :height="item.component.height" :animation="!menuFlag"
                      :is="'avue-echart-'+item.component.name" :component="item.component" :data="item.data"
                      :option="item.component.option" :theme="item.component.option.theme" :url="item.url"
                      :child="item.child" :time="item.time" :home-url="config.url" :data-method="item.dataMethod"
                      :data-type="item.dataType" :data-query="handleGetQuery(item)"
                      :formatter="item.formatter" :click-formatter="item.clickFormatter"
                      :label-formatter="item.labelFormatter" :data-formatter="item.dataFormatter"
                      :title-formatter="item.titleFormatter">
                    </component>
                  </avue-draggable>
                  </blockquote>
                </div>
              </div>
            </div>
          </div>

          <div class="menu params" v-show="menuFlag">
            <p class="title">操作</p>
            <!-- <el-tabs class="tabs" stretch v-model="tabsActive"> -->
              <!-- <el-tab-pane name="0"> -->
                <!-- <el-tooltip slot="label" effect="dark" content="配置" placement="top">
                  <div><i>配置</i>
                  </div>
                </el-tooltip> -->
                <el-form label-width="80px" label-position="left" size="small">
                  <!-- 组件配置 -->
                  <blockquote v-if="!vaildProp('',[undefined])">
                    <!-- <el-form-item label="图层名称">
                      <avue-input v-model="activeObj.name"></avue-input>
                    </el-form-item>
                    <el-form-item label="隐藏">
                      <avue-switch v-model="activeObj.display"></avue-switch>
                    </el-form-item> -->
                    <!-- <blockquote v-if="!vaildProp('colorList')">
                      <el-form-item label="系统配色">
                        <avue-switch v-model="activeOption.switchTheme"></avue-switch>
                      </el-form-item>
                      <el-form-item label="配色选择" v-if="activeOption.switchTheme">
                        <avue-select v-model="activeOption.theme" :dic="dicOption.themeList">
                        </avue-select>
                      </el-form-item>
                    </blockquote> -->
                    <!-- <el-form-item label="宽高">
                      <span>{{activeComponent.width}} x {{activeComponent.height}}</span>
                    </el-form-item>
                    <el-form-item label="位置">
                      <span>{{activeObj.left}} , {{activeObj.top}}</span>
                    </el-form-item> -->

                    <el-form-item label="坐标x">
                      <avue-input-number :value="activeObj.left" @change="changeX"></avue-input-number>
                    </el-form-item>
                    <el-form-item label="坐标y">
                      <avue-input-number :value="activeObj.top" @change="changeY"></avue-input-number>
                    </el-form-item>
                    <el-form-item label="宽度">
                      <avue-input-number :value="activeComponent.width" :min="1" @change="changeWidth"></avue-input-number>
                    </el-form-item>
                    <el-form-item label="高度">
                      <avue-input-number :value="activeComponent.height" :min="1" @change="changeHeight"></avue-input-number>
                    </el-form-item>

                    <!-- 文字配置 -->
                    <el-divider content-position="center">参数配置</el-divider>
                    <blockquote v-if="activeComponent.prop==='text'">
                      <el-form-item label="文本内容">
                        <avue-input v-model="activeObj.data"></avue-input>
                      </el-form-item>
                      <el-form-item label="字体大小">
                        <avue-input-number v-model="activeOption.fontSize" :max="200"></avue-input-number>
                      </el-form-item>
                      <el-form-item label="字体颜色">
                        <avue-color v-model="activeOption.color"></avue-color>
                      </el-form-item>
                      <el-form-item label="字体间距">
                        <el-slider v-model="activeOption.split"></el-slider>
                      </el-form-item>
                      <el-form-item label="字体背景">
                        <avue-color v-model="activeOption.backgroundColor"></avue-color>
                      </el-form-item>
                      <el-form-item label="文字粗细">
                        <avue-select v-model="activeOption.fontWeight" :dic="dicOption.fontWeight">
                        </avue-select>
                      </el-form-item>
                      <el-form-item label="对齐方式">
                        <avue-select v-model="activeOption.textAlign" :dic="dicOption.textAlign">
                        </avue-select>
                      </el-form-item>
                      <el-collapse accordion>
                        <el-collapse-item title="跑马灯设置">
                          <el-form-item label="开启">
                            <avue-switch v-model="activeOption.scroll"></avue-switch>
                          </el-form-item>
                          <blockquote v-if="activeOption.scroll">
                            <el-form-item label="滚动速度">
                    <el-slider v-model="activeOption.speed"></el-slider>
                              <!-- <avue-input v-model="activeOption.speed"></avue-input> -->
                            </el-form-item>
                          </blockquote>
                        </el-collapse-item>
                      </el-collapse>
                    </blockquote>
                    <!-- 实时时间配置 -->
                    <blockquote v-else-if="activeComponent.prop==='datetime'">
                      <el-form-item label="时间格式">
                        <avue-select v-model="activeOption.format" :dic="dicOption.format">
                        </avue-select>
                      </el-form-item>
                      <el-form-item label="自定义格式">
                        <avue-input v-model="activeOption.format">
                        </avue-input>
                      </el-form-item>
                      <el-form-item label="字体间距">
                        <avue-input-number v-model="activeOption.split" :max="200"></avue-input-number>
                      </el-form-item>
                      <el-form-item label="字体大小">
                        <avue-input-number v-model="activeOption.fontSize" :max="200"></avue-input-number>
                      </el-form-item>
                      <el-form-item label="字体背景">
                        <avue-color v-model="activeOption.backgroundColor"></avue-color>
                      </el-form-item>
                      <el-form-item label="对其方式">
                        <avue-select v-model="activeOption.textAlign" :dic="dicOption.textAlign">
                        </avue-select>
                      </el-form-item>
                      <el-form-item label="文字粗细">
                        <avue-select v-model="activeOption.fontWeight" :dic="dicOption.fontWeight">
                        </avue-select>
                      </el-form-item>
                      <el-form-item label="字体颜色">
                        <avue-color v-model="activeOption.color"></avue-color>
                      </el-form-item>
                    </blockquote>
                    <!-- 图片配置 -->
                    <blockquote v-else-if="activeComponent.prop==='img'">
                      <el-form-item label="透明度">
                        <el-slider v-model="activeOption.opacity" :max="1" :step="0.1"></el-slider>
                      </el-form-item>
                      <el-tooltip slot="label" effect="dark" content="点击更换图片" placement="top">
                        <el-form-item label="播放内容">
                            <img :src="activeObj.data" alt="" width="100%" @click="handleChangeImg"/>
                        </el-form-item>
                      </el-tooltip>
                    </blockquote>
                    <!-- 轮播配置 -->
                    <blockquote v-else-if="activeComponent.prop==='swiper'">
                      <!-- <el-form-item label="类型">
                        <avue-radio v-model="activeOption.type" :dic="dicOption.swiperType"></avue-radio>
                      </el-form-item> -->
                      <el-form-item label="轮播时间">
                        <avue-input v-model="activeOption.interval"></avue-input>
                      </el-form-item>
                      <el-form-item label="播放内容">
                        <el-row v-for="(row,index) in activeObj.data" :key="index">
                          <el-col :span="10">
                            <el-image
                              style="width:50px; height: 50px;"
                              :src="row.thumb" @click="preview(row, '2')">
                            </el-image>
                          </el-col>
                          <el-col :span="14" style="line-height: 18px; font-size: 13px;">
                            {{row.name}}
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-button style="padding: 0" type="text" @click="handleOpenImg(100000)">更换内容</el-button>
                        </el-row>
                      </el-form-item>
                    </blockquote>
                    <!-- 视频配置 -->
                    <blockquote v-else-if="activeComponent.prop==='video'">
                      <el-form-item label="播放内容">
                        <el-row v-for="(row,index) in activeObj.data" :key="index">
                          <el-col :span="10">
                            <el-image
                              style="width:50px; height: 50px;"
                              :src="row.thumb" @click="preview(row, '1')">
                            </el-image>
                          </el-col>
                          <el-col :span="14" style="line-height: 18px; font-size: 13px;">
                            {{row.name}}
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-button style="padding: 0" type="text" @click="handleOpenVideo(100000)">更换内容</el-button>
                        </el-row>
                      </el-form-item>
                    </blockquote>

                  </blockquote>
                  <!-- 多选配置选项 -->
                  <blockquote v-else-if="isSelect">
                    <el-form-item label="水平方式">
                      <el-tooltip content="左对齐" placement="top">
                        <i class="el-icon-s-fold icon" @click="handlePostionSelect('left')"></i>
                      </el-tooltip>
                      <el-tooltip content="居中对齐" placement="top">
                        <i class="el-icon-s-operation icon" @click="handlePostionSelect('center')"></i>
                      </el-tooltip>
                      <el-tooltip content="右对齐" placement="top">
                        <i class="el-icon-s-unfold icon" @click="handlePostionSelect('right')"></i>
                      </el-tooltip>
                    </el-form-item>
                    <el-form-item label="垂直方式">
                      <el-tooltip content="顶对齐" placement="top">
                        <i class="el-icon-s-fold icon" @click="handlePostionSelect('top')"></i>
                      </el-tooltip>
                      <el-tooltip content="中部对齐" placement="top">
                        <i class="el-icon-s-operation icon" @click="handlePostionSelect('middle')"></i>
                      </el-tooltip>
                      <el-tooltip content="底对齐" placement="top">
                        <i class="el-icon-s-unfold icon" @click="handlePostionSelect('bottom')"></i>
                      </el-tooltip>
                    </el-form-item>
                    <el-form-item label-width="0">
                      <el-button type="primary" size="small" class="blockquote" @click="handleDeleteSelect">批量删除</el-button>
                    </el-form-item>
                    <el-form-item label-width="0">
                      <el-button type="danger" size="small" class="blockquote" @click="handleExectSelect">退出全选</el-button>
                    </el-form-item>
                  </blockquote>
                  <!-- 主屏的配置项 -->
                  <blockquote v-else>
                    <el-form-item label="节目名称">
                      <avue-input v-model="config.name" disabled></avue-input>
                    </el-form-item>
                    <el-form-item label="屏幕宽度">
                      <avue-input v-model="config.width" disabled></avue-input>
                    </el-form-item>
                    <el-form-item label="屏幕高度">
                      <avue-input v-model="config.height" disabled></avue-input>
                    </el-form-item>
                    <el-form-item label="屏幕缩放">
                      <el-slider v-model="config.scale" :min="10" :max="200" :format-tooltip="formatTooltip"></el-slider>
                    </el-form-item>
                  </blockquote>
                </el-form>
          </div>
        </div>
      </el-form>
      <el-dialog title="预览" width="70%"  append-to-body :visible.sync="videoVisible" @close="closeVideo">
        <video  scrolling="no" autoplay  style="scrolling:no;background-color: black;"
         width="100%" :src="url"  controls="controls">Your browser does not support the video tag.
        </video>
      </el-dialog>
      <el-dialog title="预览" width="70%"  append-to-body :visible.sync="imageVisible">
        <img width="100%"  :src="url" />
      </el-dialog>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">关闭</el-button>
        <el-button type="primary"  @click="doSubmit()" v-noMoreClick>确定</el-button>
      </span>
    </el-dialog>
    <JfInfoFileList ref="jfInfoFileList" @filesSelectList="filesSelectList"></JfInfoFileList>
  </div>
</template>

<script>
  import JfInfoFileList from '../file/JfInfoFileList'
  import draggable from 'vuedraggable'
  // 计算表达式的值
  function evil (fn) {
    var Fn = Function  // 一个变量指向Function，防止有些前端编译工具报错
    return new Fn('return ' + fn)()
  }
  function compare (propertyName) {
    return function (object1, object2) {
      var value1 = object1[propertyName]
      var value2 = object2[propertyName]
      if (value2 < value1) {
        return -1
      } else if (value2 > value1) {
        return 1
      } else {
        return 0
      }
    }
  }

  const baseList = [{
    label: '文字',
    icon: 'icon-text',
    children: [{
      label: '文本框',
      option: {
        title: '文本框',
        name: '文本框',
        icon: 'icon-text',
        data: '文本框',
        component: {
          width: 100,
          height: 50,
          option: {
            textAlign: 'left',
            fontSize: 26,
            fontWeight: 'normal',
            color: '#fff'
          },
          name: 'text',
          prop: 'text'
        }
      }
    },
    {
      label: '跑马灯',
      option: {
        title: '跑马灯',
        name: '跑马灯',
        icon: 'icon-scroll',
        top: 0,
        left: 0,
        data: '跑马灯',
        component: {
          width: 100,
          height: 50,
          option: {
            scroll: true,
            speed: 70,
            textAlign: 'text',
            fontSize: 26,
            fontWeight: 'normal',
            color: '#fff'
          },
          name: 'text',
          prop: 'text'
        }
      }
    },
    {
      label: '实时时间',
      option: {
        name: '实时时间',
        title: '实时时间',
        icon: 'icon-datetime',
        top: 78,
        left: 1604,
        zIndex: 31,
        component: {
          width: 250,
          height: 50,
          name: 'datetime',
          prop: 'datetime',
          option: {
            format: 'yyyy-MM-dd hh:mm:ss',
            color: '#fff',
            textAlign: 'left',
            fontSize: 24,
            fontWeight: 'normal'
          }
        }
      }
    }]
  },
  {
    label: '图片',
    icon: 'icon-image',
    children: [{
      label: '轮播图',
      option: {
        title: '轮播图',
        name: '轮播图',
        icon: 'icon-banner',
        top: 0,
        left: 0,
        dataType: 0,
        data: [{
          value: '/static/img/login.jpg',
          thumb: '/static/img/login.jpg',
          // value: '../../../../static/img/login.jpg',
          // thumb: '../../../../static/img/login.jpg',
          name: '示例图片',
          size: 327000
        },
        {
          value: '/static/img/login.jpg',
          thumb: '/static/img/login.jpg',
          name: '示例图片',
          size: 327000
        }],
        component: {
          width: 670,
          height: 370,
          option: {
            type: '',
            interval: 5000,
            opacity: 100,
            indicator: 'none'
          },
          name: 'swiper',
          prop: 'swiper'
        }
      }
    }
    // ,
    // {
    //   label: '单张图片',
    //   option: {
    //     title: '图片',
    //     name: '图片',
    //     icon: 'icon-image',
    //     top: 0,
    //     left: 0,
    //     data: '../../../../static/img/login.jpg',
    //     component: {
    //       width: 140,
    //       height: 140,
    //       name: 'img',
    //       prop: 'img',
    //       option: {
    //         duration: '1000'
    //       }
    //     }
    //   }
    // },
    ]
  },
  {
    label: '视频',
    icon: 'icon-video',
    children: [{
      label: '视频',
      option: {
        title: '视频',
        name: '视频',
        icon: 'icon-video',
        top: 0,
        left: 0,
        dataType: 0,
        data: [{
          value: '/static/video/demo.mp4',
          thumb: '/static/img/video.png',
          name: '示例视频',
          size: 788493
        }],
        component: {
          width: 670,
          height: 370,
          option: {},
          name: 'video',
          prop: 'video'
        }
      }
    }]
  }]

  var dicOption = {
    fontWeight: [{ label: 'normal', value: 'normal' }, { label: 'bold', value: 'bold' }, { label: 'bolder', value: 'bolder' }, { label: 'ligter', value: 'ligter' }],
    border: [{ label: '无边框', value: '' }, { label: '内置图片', value: 'img' }, { label: '内置边框', value: 'border' }],
    textAlign: [{ label: '居中', value: 'center' }, { label: '左对齐', value: 'left' }, { label: '右对齐', value: 'right' }],
    dataType: [{ label: '静态数据', value: 0 }, { label: '动态数据', value: 1 }],
    dataList: ['tabs', 'map', 'video', 'wordCloud', 'pie', 'pictorialBar', 'iframe', 'swiper', 'flop', 'bar', 'line', 'progress', 'table', 'gauge', 'funnel', 'scatter', 'radar'],
    swiperType: [{ label: '普通', value: '' }, { label: '立体', value: 'card' }],
    swiperIndicator: [{ label: '外部', value: 'indicator' }, { label: '不显示', value: 'none' }],
    format: [{ label: '日期', value: 'yyyy-MM-dd' }, { label: '日期+时分', value: 'yyyy-MM-dd hh:mm' }, { label: '日期+时分秒', value: 'yyyy-MM-dd hh:mm:ss' }, { label: '日期(无年)', value: 'MM-dd' }, { label: '时分', value: 'hh:mm' }, { label: '时分秒', value: 'hh:mm:ss' }, { label: '星期', value: 'day' }]
  }

  export default {
    data () {
      return {
        videoVisible: false,
        imageVisible: false,
        url: '',
        visible: false,
        loading: false,
        contentWidth: 0,
        contentMenu: false,
        contentMenuX: -1000,
        contentMenuY: -1000,
        zIndex: 0,
        key: '',
        scale: '',
        baseList: baseList,
        menuFlag: true,
        dataVisible: false,
        gradeFlag: false,
        dicOption: dicOption,
        config: {
          id: '',
          name: '',
          width: 1920,
          height: 1080,
          scale: 1,
          query: {}
        },
        active: -1,
        tabsActive: 0,
        list: [],
        selectList: [],
        selectCount: {
          maxx1: 0,
          maxx2: 0,
          maxy1: 0,
          maxy2: 0,
          x1: 0,
          x2: 0,
          y1: 0,
          y2: 0
        },
        moveObj: {
          startX: 0,
          startY: 0,
          show: false
        },
        selectObj: {
          startX: 0,
          startY: 0,
          moveX: 0,
          moveY: 0,
          flag: false,
          show: false,
          left: 0,
          top: 0,
          width: 0,
          height: 0
        }
      }
    },
    components: {
      JfInfoFileList,
      draggable
    },
    mounted () {
      var _this = this
      document.onkeydown = function () {
        if (_this.active < 0) {
          return
        }
        var top = 0
        var left = 0
        if (window.event.keyCode === 38) {
          // up
          top = parseInt(_this.activeObj.top) - 1
          _this.changeY(top)
          _this.activeObj.top = top
        } else if (window.event.keyCode === 40) {
          // down
          top = parseInt(_this.activeObj.top) + 1
          _this.changeY(top)
          _this.activeObj.top = top
        } else if (window.event.keyCode === 37) {
          // left
          left = parseInt(_this.activeObj.left) - 1
          _this.changeX(left)
          _this.activeObj.left = left
        } else if (window.event.keyCode === 39) {
          // right
          left = parseInt(_this.activeObj.left) + 1
          _this.changeX(left)
          _this.activeObj.left = left
        }
      }
    },
    computed: {
      selectStyle () {
        return {
          width: this.setPx(this.selectObj.width),
          height: this.setPx(this.selectObj.height),
          left: this.setPx(this.selectObj.left),
          top: this.setPx(this.selectObj.top)
        }
      },
      isSelect () {
        return !this.validatenull(this.selectList)
      },
      isActive () {
        return this.active !== -1
      },
      childList () {
        return this.list.filter(ele => {
          if (['tabs', 'slide'].includes(ele.component.prop)) {
            return false
          }
          return true
        })
      },
      stepScale () {
        let scale = Number(((1 / this.scale) * 100).toFixed(0))
        return scale
      },
      queryData: {
        get () {
          const data = this.config.query
          if (this.isJson(data)) {
            return JSON.stringify(data, null, 4)
          }
          return ''
        },
        set (val) {
          let data
          try {
            data = JSON.parse(val, null, 4)
            this.config.query = data
          } catch (error) {
            this.$message.error('json格式错误，检查控制台')
            this.$Log.danger(error)
          }
        }
      },
      jsonData: {
        get () {
          const data = this.activeObj.data
          if (this.isJson(data)) {
            return JSON.stringify(data, null, 4)
          }
          return ''
        },
        set (val) {
          let data
          try {
            data = JSON.parse(val, null, 4)
            this.activeObj.data = data
          } catch (error) {
            this.$message.error('json格式错误，检查控制台')
            this.$Log.danger(error)
          }
        }
      },
      styleContentmenu () {
        return {
          left: this.setPx(this.contentMenuX),
          top: this.setPx(this.contentMenuY)
        }
      },
      zIndexList: {
        set (val) {
          const leng = val.length
          val.forEach((ele, index) => {
            const zIndex = leng - index
            this.$set(this.list[ele.index], 'zIndex', zIndex)
          })
        },
        get () {
          let list = []
          list = this.list.map(ele => {
            return {
              destruction: ele.destruction,
              index: ele.index,
              title: ele.name,
              zIndex: ele.zIndex,
              icon: ele.icon
            }
          })
          list.sort(compare('zIndex'))
          return list
        }
      },
      listLen () {
        return this.list.length || 0
      },
      activeComponent () {
        return this.activeObj.component || {}
      },
      activeOption () {
        return this.activeComponent.option || {}
      },
      activeKey () {
        if (this.activeComponent.name === 'table') {
          return this.activeOption.column
        } else if (['bar', 'line', 'pie', 'table'].includes(this.activeComponent.name)) {
          return this.activeOption.barColor
        }
      },
      activeObj () {
        return this.list[this.active] || {}
      },
      activeNextObj () {
        return this.list[this.active - 1] || {}
      },
      activeBreakObj () {
        return this.list[this.active + 1] || {}
      },
      styleName () {
        const scale = this.config.scale
        return Object.assign({
          transform: `scale(${scale / 100}, ${scale / 100})`,
          width: this.setPx(this.config.width),
          height: this.setPx(this.config.height)
        }, (() => {
          return {}
        })())
      },
      gradeLenStyle () {
        return {
          backgroundSize: `${this.setPx(this.config.gradeLen)} ${this.setPx(this.config.gradeLen)},${this.setPx(this.config.gradeLen)} ${this.setPx(this.config.gradeLen)}`
        }
      }
    },
    watch: {
      'config.width' () {
        this.setResize('width')
      },
      'config.height' () {
        this.setResize('height')
      },
      'config.scale' () {
        this.setResize()
      },
      menuFlag (val) {
        this.setResize()
      },
      active (val) {
        this.list.forEach((ele, index) => {
          this.$refs['item_' + index][0].setActive(index === val)
        })
        this.$nextTick(() => {
          this.selectObj.flag = false
          this.contentMenu = false
        })
        this.tabsActive = '0'
      }
    },
    methods: {
      changeX (e) {
        if (parseInt(this.activeObj.left) !== e) {
          this.$set(this.activeComponent, 'left', e)
          this.gradeFlag = false
          this.$refs['item_' + this.active][0].setLeft(e)
        }
      },
      changeY (e) {
        if (parseInt(this.activeObj.top) !== e) {
          this.$set(this.activeComponent, 'top', e)
          this.gradeFlag = false
          this.$refs['item_' + this.active][0].setTop(e)
        }
      },
      changeWidth (e) {
        if (parseInt(this.activeComponent.width) !== e) {
          this.$set(this.activeComponent, 'width', e)
          this.gradeFlag = false
          this.$refs['item_' + this.active][0].setWidth(e)
        }
      },
      changeHeight (e) {
        if (parseInt(this.activeComponent.height) !== e) {
          this.$set(this.activeComponent, 'height', e)
          this.gradeFlag = false
          this.$refs['item_' + this.active][0].setHeight(e)
        }
      },
      init (item, id) {
        this.config.name = item.name
        var rs = (item.resolution || '1920x1080').split('x')
        this.config.width = parseFloat(rs[0])
        this.config.height = parseFloat(rs[1])
        this.config.id = item.id
        this.visible = true
        this.loading = false
        this.$nextTick(() => {
          this.list = JSON.parse(item.display || '[]')
          this.contentWidth = this.$refs.content.offsetWidth
          this.setScale(this.$refs.wrapper.offsetWidth)
          this.setResize()
        })
      },
      // 表单提交
      doSubmit () {
        let list = this.list.filter(ele => !ele.destruction === true)
        let listJson = JSON.stringify(list)
        this.loading = true
        this.$http({
          url: `/info/program/jfInfoProgram/save`,
          method: 'post',
          data: {
            'id': this.config.id,
            'display': listJson
          }
        }).then(({data}) => {
          if (data && data.success) {
            this.visible = false
            this.$message.success(data.msg)
            this.$emit('onDataChange', {
              'id': this.config.id,
              'display': listJson
            })
            this.destruction()
          }
          this.loading = false
        })
      },
      vaildProp (name, list) {
        if (list) {
          return list.includes(this.activeComponent.prop)
        }
        return this.dicOption[name].includes(this.activeComponent.prop)
      },
      handleMoveMouseUp (e) {
        this.moveObj.show = false
      },
      handleMoveMouseDown (e) {
        const x = e.offsetX
        const y = e.offsetY
        this.moveObj.startX = x
        this.moveObj.startY = y
        this.moveObj.show = true
      },
      handleMoveMouseMove (e) {
        if (this.moveObj.show) {
          const x = e.offsetX
          const y = e.offsetY
          const movex = (x - this.moveObj.startX) * this.stepScale
          const movey = (y - this.moveObj.startY) * this.stepScale
          this.moveObj.startX = x
          this.moveObj.startY = y
          this.handleMoveSelectList(movex, movey)
        }
      },
      handleSelectMouseDown (e) {
        this.list.forEach((ele, index) => {
          this.$refs['item_' + index][0].setActive(false)
        })
        this.selectObj.flag = false
        this.selectObj.width = 0
        this.selectObj.height = 0
        const x = e.layerX
        const y = e.layerY
        this.selectObj.startX = x
        this.selectObj.startY = y
        this.selectObj.left = x
        this.selectObj.top = y
        this.selectObj.show = true
        this.handleMouseDown()
      },
      handleSelectMouseMove (e) {
        if (this.selectObj.show) {
          const x = e.layerX
          const y = e.layerY
          this.selectObj.width = this.selectObj.width + x - this.selectObj.startX
          this.selectObj.height = this.selectObj.height + y - this.selectObj.startY
          this.selectObj.startX = x
          this.selectObj.startY = y
        }
      },
      handleSelectMouseUp () {
        if (this.selectObj.show) {
          this.selectObj.show = false
          if (this.selectObj.width !== 0 && this.selectObj.height !== 0) {
            this.selectCount.x1 = this.selectObj.left * this.stepScale
            this.selectCount.x2 = this.selectCount.x1 + this.selectObj.width * this.stepScale
            this.selectCount.y1 = this.selectObj.top * this.stepScale
            this.selectCount.y2 = this.selectCount.y1 + this.selectObj.height * this.stepScale
            this.handleGetSelectList()
          }
        }
      },
      handlePostionSelect (postion) {
        const x1 = this.selectCount.maxx1
        const x2 = this.selectCount.maxx2
        const y1 = this.selectCount.maxy1
        const y2 = this.selectCount.maxy2
        // const xa = x1 + x2
        // const ya = y1 + y2
        if (postion === 'left') {
          this.handleMoveSelectList(x1, undefined, true, postion)
        } else if (postion === 'center') {
          this.handleMoveSelectList(x1 + (x2 - x1) / 2, undefined, true, postion)
        } else if (postion === 'right') {
          this.handleMoveSelectList(x2, undefined, true, postion)
        } else if (postion === 'top') {
          this.handleMoveSelectList(undefined, y1, true, postion)
        } else if (postion === 'middle') {
          this.handleMoveSelectList(undefined, y1 + (y2 - y1) / 2, true, postion)
        } else if (postion === 'bottom') {
          this.handleMoveSelectList(undefined, y2, true, postion)
        }
      },
      handleMoveSelectList (left, top, type, postion) {
        this.selectList.forEach(index => {
          const ele = this.list[index]
          const eleComponent = ele.component
          // 水平情况
          if (left) {
            let baseLeft = Number(type ? left : (ele.left + left).toFixed(2))
            if (postion === 'right') {
              baseLeft = baseLeft - eleComponent.width
            } else if (postion === 'center') {
              const objCenter = ele.left + eleComponent.width / 2
              baseLeft = ele.left + (left - objCenter)
            }
            this.$set(this.list[index], 'left', baseLeft)
            this.$refs['item_' + index][0].setLeft(baseLeft)
          }
          // 垂直情况
          if (top) {
            let baseTop = Number(type ? top : (ele.top + top).toFixed(2))
            if (postion === 'bottom') {
              baseTop = baseTop - eleComponent.height
            } else if (postion === 'middle') {
              const objMiddle = ele.top + eleComponent.height / 2
              baseTop = ele.top + (top - objMiddle)
            }
            this.$set(this.list[index], 'top', baseTop)
            this.$refs['item_' + index][0].setTop(baseTop)
          }
        })
        this.handleCalcPostionSelect()
      },
      handleGetSelectList () {
        this.selectList = []
        this.list.forEach((ele, index) => {
          const left = ele.left
          const top = ele.top
          // const width = ele.component.width
          // const height = ele.component.height
          if ((!ele.destruction && !ele.display)) {
            if ((left >= this.selectCount.x1 && left <= this.selectCount.x2) && (top >= this.selectCount.y1 && top <= this.selectCount.y2)) {
              this.selectList.push(index)
            }
          }
        })
        this.handleCalcPostionSelect()
        if (!this.validatenull(this.selectList)) {
          this.selectList.forEach(index => {
            this.$refs['item_' + index][0].setActive(true)
          })
          this.selectObj.flag = true
        }
      },
      // 计算多选状态下的最大边界值
      handleCalcPostionSelect () {
        this.selectCount.maxx1 = 99999
        this.selectCount.maxy1 = 99999
        this.selectList.forEach(index => {
          const ele = this.list[index]
          const left = ele.left
          const top = ele.top
          const width = ele.component.width
          const height = ele.component.height
          if (this.selectCount.maxx1 > left) {
            this.selectCount.maxx1 = left
          }
          if (this.selectCount.maxx2 < left + width) {
            this.selectCount.maxx2 = left + width
          }
          if (this.selectCount.maxy1 > top) {
            this.selectCount.maxy1 = top
          }
          if (this.selectCount.maxy2 < top + height) {
            this.selectCount.maxy2 = top + height
          }
        })
      },
      handleDeleteSelect () {
        this.selectList.forEach(index => {
          this.$set(this.list[index], 'destruction', true)
        })
        this.selectList = []
        this.selectObj.flag = false
      },
      handleExectSelect () {
        this.selectList.forEach(index => {
          this.$refs['item_' + index][0].setActive(false)
        })
        this.selectList = []
        this.selectObj.flag = false
      },
      handleGetQuery (item) {
        return Object.assign(this.deepClone(this.config.query), item.dataQuery)
      },
      handleFormatter () {
        try {
          this.activeObj.formatter = evil(this.activeObj.formatter)
          this.activeObj.clickFormatter = evil(this.activeObj.clickFormatter)
          this.activeObj.labelFormatter = evil(this.activeObj.labelFormatter)
          this.$message.success('刷新成功')
        } catch (error) {
          this.$message.error('检测参数错误，检查控制台')
          this.$Log.danger(error)
        }
      },
      handleRefresh () {
        this.activeObj.dataFormatter = evil(this.activeObj.dataFormatter)
        this.$refs['list_' + this.active][0].updateData()
        this.$message.success('刷新成功')
      },
      handleMouseOver (val) {
        this.list.forEach((ele, index) => {
          this.$refs['item_' + index][0].setOverActive(index === val)
        })
      },
      setScale (width) {
        this.$nextTick(() => {
          this.config.scale = ((width || this.contentWidth) / this.config.width) * 100
          this.scale = this.config.scale
          this.config.scale = this.config.scale * 0.8
        })
      },
      setResize (type) {
        this.$nextTick(() => {
          if (type === 'width') {
            this.$refs.content.style.width = this.setPx((this.config.scale * this.config.width) / 100)
          } else if (type === 'height') {
            this.$refs.content.style.height = this.setPx((this.config.scale * this.config.height) / 100)
          } else {
            this.$refs.content.style.width = this.setPx((this.config.scale * this.config.width) / 100)
            this.$refs.content.style.height = this.setPx((this.config.scale * this.config.height) / 100)
          }
        })
      },
      formatTooltip (val) {
        return parseInt(val)
      },
      handleMouseDown () {
        this.active = -1
      },
      handleTop (active) {
        this.activeObj.zIndex = this.listLen + 1
      },
      handleStepTop (active) {
        this.activeObj.zIndex = this.activeObj.zIndex + 1
        if (this.activeNextObj) this.activeNextObj.zIndex = this.activeNextObj.zIndex - 1
      },
      handleStepBottom (active) {
        this.activeObj.zIndex = this.activeObj.zIndex - 1
        if (this.activeBreakObj) this.activeBreakObj.zIndex = this.activeBreakObj.zIndex + 1
      },
      handleBottom (active) {
        this.list[active].zIndex = -1
      },
      // handleMapSelect(value) {
      //   this.activeOption.mapList = this.dicOption.mapList[value].list;
      // },
      handleContextMenu (e) {
        this.$nextTick(() => {
          if (this.active === -1) {
            this.contentMenu = false
          } else {
            this.contentMenuX = e.clientX
            this.contentMenuY = e.clientY
            this.contentMenu = true
          }
        })
      },
      handleChange (index, zindex) {
        this.active = index
        this.zIndex = zindex
        this.contentMenu = false
      },
      handleFocus () {
        this.gradeFlag = true
      },
      handleBlur () {
        this.gradeFlag = false
      },
      handleScreen (index, zIndex) {
        const ele = this.list[index].component
        this.$set(ele, 'width', this.config.width)
        this.$set(ele, 'height', this.config.height)
        this.$set(ele, 'left', 0)
        this.$set(ele, 'top', 0)
        this.gradeFlag = false
        this.$refs['item_' + index][0].setLeft(0)
        this.$refs['item_' + index][0].setTop(0)
        this.$refs['item_' + index][0].setWidth(this.config.width)
        this.$refs['item_' + index][0].setHeight(this.config.height)
      },
      handleDel (index, zIndex) {
        const obj = this.list[index]
        this.$confirm(`是否删除${obj.name}图层?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.active = -1
          if (this.list[index].component.prop === 'video') {
            this.list[index].data = []
          }
          this.$set(this.list[index], 'destruction', true)
        }).catch(() => {

        })
      },
      handleCopy (index, zIndex) {
        const obj = this.list[index]
        this.addCompoment(obj)
      },
      handleResize ({ index, width, height }) {
        const ele = this.list[index].component
        this.$set(ele, 'width', width)
        this.$set(ele, 'height', height)
      },
      handlePostion ({ index, left, top }) {
        const ele = this.list[index]
        this.$set(ele, 'left', left)
        this.$set(ele, 'top', top)
      },
      rowSave (row, done) {
        this.activeKey.push(row)
        done()
      },
      rowDel (row, index) {
        this.activeKey.splice(index, 1)
      },
      rowUpdate (row, index, done) {
        this.activeKey.splice(index, 1, row)
        done()
      },
      addCompoment (option) {
        const obj = this.deepClone(option)
        obj.left = 0
        obj.top = 0
        obj.zIndex = this.listLen
        obj.index = this.listLen
        this.list.push(obj)
      },
      handleView () {
        this.menuFlag = false
        this.active = -1
        this.setScale(document.body.clientWidth)
      },
      handleReset () {
        this.menuFlag = true
        this.setScale(this.contentWidth)
      },
      handleBuild () {
        this.dataVisible = true
      },
      handleChangeImg () {
        this.$refs.jfInfoFileList.init('2', 1)
      },
      handleOpenImg (num) {
        this.$refs.jfInfoFileList.init('2', num, this.activeObj.data)
      },
      handleOpenVideo (num) {
        this.$refs.jfInfoFileList.init('1', num, this.activeObj.data)
      },
      filesSelectList (list) {
        if (!this.activeObj || !this.activeObj.component || !list || list.length === 0) {
          return
        }
        if (this.activeObj.component.prop === 'img') {
          // 单张图片
          if (list.length > 0) {
            this.activeObj.data = list[0].value
          }
        } else if (this.activeObj.component.prop === 'swiper') {
          this.activeObj.data = list
        } else if (this.activeObj.component.prop === 'video') {
          this.activeObj.data = list
        }
      },
      // 查看
      preview (item, type) {
        if (type === '1') {
          this.videoVisible = true
          this.url = item.value
        } else if (type === '2') {
          this.imageVisible = true
          this.url = item.value
        }
        // this.$ImagePreview([item], 0)
      },
      // 关闭该页面
      closeDialog () {
        this.destruction()
        this.visible = false
      },
      destruction () {
        this.list.forEach((item) => {
          if (item.component.prop === 'video') {
            item.data = []
          }
          this.$set(item, 'destruction', true)
        })
      },
      // 关闭视频关闭声音
      closeVideo () {
        this.url = ''
      }
    }
  }
</script>
<style scoped>
  @import url("../../../../assets/css/style.scss");
</style>
